<template>
  <div class="accountDiv">
    <div class="accountMenu">
      <div class="menu-and-button-wrapper">
        <i class="cancel-button el-icon-arrow-down" type="text" @click="cancel"></i>
        <el-menu :default-active="activeNav" class="el-menu-demo" mode="horizontal"
                 @select="handleNav">
          <el-menu-item index="z">支出</el-menu-item>
          <el-menu-item index="s">收入</el-menu-item>
        </el-menu>
        <i class="setting-button el-icon-setting" type="text" @click="setType"></i>
      </div>
    </div>
    <div class="content">
      <div class="item-container">
        <div v-for='(item, index) of itemList' :key="item.id" @click="changeItem(item, index)" class="item">
          <div class="iconDiv">
            <svg-icon :icon-file-name="item.picture" @click="selectType(item)"
                      :class="[{'typeIcon':item !== activeItem},{'nowIcon':item === activeItem}]"></svg-icon>
          </div>
          <div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <key-board-view class="keyBoard" v-if="isShowKeyBoard" :itemId="itemId" ></key-board-view>
  </div>
</template>

<script>
import accountApi from "@/api/accountApi";
import router from "@/router";
import keyBoardView from "@/views/indexView/KeyBoardView.vue"

export default {
  components:{
    keyBoardView:keyBoardView
  },
  data() {
    return {
      show: false,
      alterIconItem: {},
      isShowKeyBoard: false,
      activeItemIndex: -1, // 活跃项的索引
      activeItem: -1,
      activeNav: "z",
      exit: true,
      itemList: [{
        id: "",
        name: "",
        picture: "",
        remark: ""
      }],
      itemId:"",
      MIN_ITEMS_THRESHOLD: 36,
    };
  },

  created() {
    this.handleNav(this.activeNav);
  },
  methods: {
    handleNav(key) {
      this.activeNav = key;
      this.itemId = "";
      const param = {
        type: key,
        userId: window.localStorage.getItem("userId")
      };
      accountApi.getBudgetType(param).then((res) => {
        if (res.data.code == 200) {
          this.itemList = res.data.data;
        }
      }).catch(() => {
        this.$message({
          message: '页面加载失败',
          type: 'error'
        });
      });
    },
    // 返回详情页面
    cancel() {
      this.$emit('updateShow', false);
    },
    selectType(item) {
      this.activeItem = item;
      this.itemId = item.typeId;
      $(".content").css("height", "calc(100% - 80px - 280px)").css("padding-bottom","280px");
      this.isShowKeyBoard = true;

    },
    setType() {
      router.push({
        name: 'moveType',
        params: {type: this.activeNav}
      });
    },
    changeItem() {

    }
  }
};
</script>

<style scoped>
* { /* CSS Reset */
  margin: 0;
  padding: 0;
}

.accountDiv {
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  left: 0;
}

.menu-and-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */

}

.el-menu-demo {
  margin: auto auto;
}

.cancel-button {
  margin-left: 20px;
  font-size: 30px;
}

.setting-button {
  margin-right: 20px;
  font-size: 30px;
}


.item-container {
  display: flex;
  flex-wrap: wrap; /* 允许项目在容器中换行 */
  //justify-content: space-around; /* 均匀分布项目 */
  justify-content: flex-start; /* 从左到右排列 */
  align-items: center; /* 垂直居中对齐项目 */
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.iconDiv {
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 50%;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding-top: 80px; /* 留出头部的高度 */
  padding-bottom: 0px;
  overflow: auto;
  height: calc(100% - 80px);
}

.keyBoard {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: white;
  border-top: 1px solid #eee;
  height: 280px;
  padding: 10px;
  box-sizing: border-box;
}




</style>
